/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* hooks */
import { useRoleViewAuth, useRoleViewTree } from "@src/modules/account/roleModule/hooks"
import { useStoreCurrentSelectRole, useStoreFetchAuthGroups, useStoreMode, useStoreUnAssignedUserNum, useStoreInitData } from "@src/modules/account/roleModule/store/hooks"
import useLoading from '@src/modules/account/roleModule/hooks/useLoading'
/* model */
import Role, { RoleType } from '@model/entity/Role/Role'
/* vue */
import { ComponentInstance, computed, ComputedRef, defineComponent, nextTick, CreateElement } from 'vue'
import { computedStrLen } from 'pub-bbx-utils'
import {t} from '@src/locales'

export type RoleViewLeftPanelProps = {
  isPersonnelMode: boolean;
}

export interface RoleViewLeftPanelSetupState {
  roleTree: ComputedRef<Role[]>;
  currentSelectRole: ComputedRef<Role>;
  setCurrentSelectRole: (role: Role) => void;
}

export enum RoleViewLeftPanelEventEnum {
  Input = 'input',
  ChangePersonnelMode = 'changePersonnelMode',
  ChangeViewMode = 'changeViewMode',
}

export type RoleViewLeftPanelEmitsOptions = {
  input: () => void;
}

export type RoleViewLeftPanelInstance = ComponentInstance & RoleViewLeftPanelSetupState
export type RoleViewLeftPanelVM = RoleViewLeftPanelSetupState & RoleViewLeftPanelProps & ComponentInstance

export default defineComponent({
  name: ComponentNameEnum.RoleViewLeftPanel,
  emits: [
    RoleViewLeftPanelEventEnum.Input
  ],
  props: {
    isPersonnelMode: {
      type: Boolean,
      default: false
    }
  },
  setup(props: RoleViewLeftPanelProps, { slots, emit }) {
    
    const { currentSelectRole, setCurrentSelectRole } = useStoreCurrentSelectRole()
    const { tree: roleTree } = useRoleViewTree()
    const { canCreateRole } = useRoleViewAuth()
    const { setUserViewMode, setAssignedUserViewMode, setCreateMode, isAssignedUserViewMode } = useStoreMode()
    const { isProviderUser } = useStoreInitData()
    const fetchAuthGroups = useStoreFetchAuthGroups()
    const { unAssignedUserNum } = useStoreUnAssignedUserNum()
    const { loading } = useLoading()
    
    const onTreeSelectedHandler = (role: RoleType) => {
      
      setCurrentSelectRole(role)
      
      nextTick(() => {
        setUserViewMode()
      })
      
    }
    
    const onClickPersonnelModeHandler = () => {
      
      setCurrentSelectRole({
        ...currentSelectRole.value,
        id: ''
      })
      
      setAssignedUserViewMode()
    }

    const currentIsProviderUser = computed(()=>{
      return isProviderUser.value
    })
    
    const isPersonnelSelected = computed(() => {
      return isAssignedUserViewMode.value
    })
    
    const isShowUnAssignedUserNum = computed(() => {
      return unAssignedUserNum.value > 0
    })
    
    function onCreateRoleButtonClickHandler() {
      setCreateMode()
      fetchAuthGroups()
    }
    
    return {
      canCreateRole,
      roleTree,
      currentSelectRole,
      isPersonnelSelected,
      unAssignedUserNum,
      isShowUnAssignedUserNum,
      loading,
      setCurrentSelectRole,
      onClickPersonnelModeHandler,
      onTreeSelectedHandler,
      onCreateRoleButtonClickHandler,
      currentIsProviderUser
    }
  },
  methods: {
    nodeRender(h: CreateElement, node: RoleType) {
      
      const count = node?.count || 0
      const isShowCount = count > 0
      const content = `${node?.name}${isShowCount ? `（${node.count}）` : ''}`
      
      const isOverFlow = computedStrLen(content) > 20
      
      const contentElement = (
        <span>
          <span class="bc-team-node-name">
            { node.name }
          </span>
          
          {isShowCount && (
            <span class="bc-team-node-count">
              （{ node.count }）
            </span>
          )}
        </span>
      )
      
      let element = contentElement
      
      if (isOverFlow) {
        element = (
          <publink-tooltip content={content}>
            { element }
          </publink-tooltip>
        )
      } 
      
      return (
        <div class="bc-team-node-wrap">
          { element }
        </div>
      )
    }
  },
  render() {
    
    const bottomClassNames = [
      'role-view-left-panel__bottom', 
      this.isPersonnelSelected ? 'role-view-left-panel__bottom-selected' : ''
    ]
    
    const leftPanelClassNames = [
      ComponentNameEnum.RoleViewLeftPanel,
      this.canCreateRole ? 'role-view-left-panel__can-create' : ''
    ]
    
    return (
      <div class={leftPanelClassNames}>
        
        <div class="role-view-left-panel__top">
          
          { !this.currentIsProviderUser && this.canCreateRole && (
            <el-button
              type="primary" 
              class="role-view-add-role-button" 
              disabled={this.loading}
              onClick={this.onCreateRoleButtonClickHandler}
            >
              {t('common.button.createRole')}
            </el-button>
          )}
          
          <div class="role-view-left-panel__tree">
            <base-tree
              data={this.roleTree}
              isDefaultExpand
              selected={this.currentSelectRole} 
              show-checkbox={false}
              onSelected={this.onTreeSelectedHandler}
              node-render={this.nodeRender}
            />
          </div>
          
        </div>
        
        {/* <div class={bottomClassNames} onClick={this.onClickPersonnelModeHandler}>
          <span>
            待分配人员
            {this.isShowUnAssignedUserNum && (
              <span>
                （{this.unAssignedUserNum}）
              </span>
            )}
          </span>
          <i class="iconfont icon-arrowright"></i>
        </div> */}
        
      </div>
    ) as any
  }
}) as any
